<template>
  <view class="bg-cell bdrs-8 ov-h pa-3">
    <view class="al-c">
      <span>泰农臻选</span>
      <span
        class="ml-auto fz-13"
        :class="info.status < 10 ? 'color-1' : 'op-5'"
        >{{ $h.getOrdSta(info.status) }}</span
      >
    </view>
    <view
      class="d-flex py-3 hover-1"
      v-for="it in info.buy_list"
      :key="it.id"
      @click="$navTo('goods', { id: it.id })"
    >
      <q-img :src="it.cover" size="54" :radius="8"></q-img>
      <view class="ml-2 flex-1">
        <view>{{ it.name }}</view>
        <view class="mt-3 fz-14 op-6 al-c gap-2">
          <span>￥{{ it.price }}</span>
          <span>数量 ×{{ it.num }}</span>
          <view class="ml-auto fz-15"
            >￥{{ (it.price * it.num).toFixed(2) }}</view
          >
        </view>
      </view>
    </view>

    <view class="u-border-top lh-2 pt-3">
      <q-kv :label="!info.pay_at ? '待付款' : '实付款'" arrow>
        <span class="red-1 mr-2" v-if="info.coupon_info"
          >共减￥{{ info.coupon_info.cut_total }}</span
        >
        <span>合计</span>
        <span class="fz-13">￥</span>
        <span class="fz-16">{{ info.final_price }}</span>
      </q-kv>
      <q-kv label="订单编号" :value="info.ord_no" copy></q-kv>
      <q-kv label="下单时间" :value="new Date(info.created_at).format()"></q-kv>
      <q-kv
        v-if="info.pay_at"
        label="支付时间"
        :value="new Date(info.pay_at).format()"
      ></q-kv>
      <q-kv
        v-if="info.update_at"
        :label="info.status == 21 ? '过期时间' : '退款时间'"
        :value="new Date(info.update_at).format()"
      ></q-kv>
    </view>

    <view class="u-border-top lh-2 pt-3 mt-3" v-if="addrInfo">
      <q-kv label="收货地址">
        <view
          class="lh-15 fz-13 hover-1"
          @click="$h.setClipboard(addrInfo.content)"
        >
          <view>{{ addrInfo.addr1 }}</view>
          <view>{{ addrInfo.addr2 }}</view>
          <view>{{ addrInfo.name }} {{ addrInfo.phone }}</view>
        </view>
      </q-kv>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    info: Object,
  },
  computed: {
    addrInfo() {
      const { name, phone, area_info, detail } = this.info?.addr_info || {};
      if (!name) {
        return null;
      }
      const addr1 = area_info.address;
      const addr2 = [area_info.title, detail].join(" ");
      return {
        addr1,
        addr2,
        name,
        phone,
        content: `${addr1} ${addr2}\n${name} ${phone}`,
      };
    },
  },
};
</script>
